<template>
    <div class="problemView">
    <Home_head/>
    <div class="problem">
        <div style="width: 90.2%; height: 43px; background-color:rgb(156, 156, 156);transform: translate3d(30px,14.5px,0)">
            <span style="margin-right: 40px;">{{ promblemName }}</span>
            <el-select v-model="value" placeholder="c" @change="changetype">
                <el-option
                 v-for="item in options"
                 :key="item.label"
                 :label="item.label"
                 :value="item.label"
                 >
                  </el-option>
            </el-select>
        </div>
        <div style="display: block; height: 86%;">
        <div  class="problem_left">
            <div v-highlight v-html="msg"></div>
        </div>
        
        <div calss="problem_right">
            <div class="edit">
                <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
                <textarea @input="handleTextareaInput" v-model="areatext" onscroll="document.getElementById('leftNum').scrollTop = this.scrollTop;" id="edit-content"></textarea>
            </div>
        </div>
        </div>
        <div style="float: right; right: 50px; transform: translateX(-135px);">
            <button style="width: 80px; height: 50px; color: #fff; background-color: yellowgreen; border: 0px; border-radius: 5px;" @click="summit()">提交</button>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import Home_head from "@/components/Home_head.vue";
export default {
    components: {
    Home_head,
  },
    data() {
        return{
            areatext:this.$route.query.CTemplateCode,
            num: '',
            msg:this.$route.query.msg, 
            options: [{label: 'c'}, {label: 'c++'}, {label: 'java'}, ],
            value: 'c',
            promblemName:"",
        }
    },
    methods: {
        handleTextareaInput(e) {
            var str = e.target.value
            str = str.replace(/\r/gi,"");
            str = str.split("\n");
            var n = str.length;
            var lineobj = document.getElementById("leftNum");
            for(var i = 1;i <= n;i ++){
                if(document.all){
                    this.num += i + "\r\n";   //判断浏览器是否是IE  
                }else{
                    this.num += i + "\n";
                }
            }
            lineobj.value = this.num;
            this.num = "";
        },
        summit(){
        if(localStorage.getItem("user_Token")==null){
            this.$message({
                message: '请先登录，登陆后才能提交题解噢~~',
                type: 'warning'
                });
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{ 
            if(response.data.isExpire==true){
                axios.post("/summitIdea",{areatext:this.areatext,type:this.value,id:this.$route.query.id-0,user_token : localStorage.getItem("user_Token")}).then((response)=>{
            const h = this.$createElement;
            
            if(response.data.success==null){
                if(response.data.error==null){
                    this.$notify({
                        title: response.data.reason,
                        message: h('i', { style: 'color: red'},response.data.cmdout)
                     });
                }else{
                    this.$notify({
                        title: response.data.reason,
                        message: h('i', { style: 'color: red'},response.data.error)
                    });
                }
            }else{
                this.$notify({
                    title: response.data.success,
                message: h('i', { style: 'color: teal'}, "输出结果为："+response.data.cmdout)
            });
            }

            })
            }else{
              this.$message({
                message: '退出成功',
                type: 'success'
                });
            }
            },
          )}

        },
        changetype(){
            axios.post("/changeType",{type:this.value,id:this.$route.query.id-0}).then((response)=>{
                this.areatext=response.data
            })
        },
        getpromblemName(){
            axios.post("/promblemName",{id:this.$route.query.id-0}).then((response)=>{
                this.promblemName=response.data
            })
        },
    },
    mounted() {
        this.handleTextareaInput({target: {value: this.areatext}});
        this.getpromblemName();
    },

}
</script>

<style>
.problemView{
    display: flex;
    background: rgb(243, 243, 243);
}
.problem{
    width: 100%;
    height: 900px;
    background: rgb(243, 243, 243);
    margin-top: 55px;
}
.problem_left{
    float: left;
    width: 40%;
    margin-right: 25px;
    margin-left: 30px;
    background: #fff;
    padding: 20px;
}
.problem_right{
    float: left;
    width: 56%;
}
.edit {
    display: flex;
    height: 300px;
    margin-top: 15px;
 }
 #leftBox {
     width: 40px; 
     height:100%; 
     text-align:left; 
 }
 #edit-content {
     padding:10px 8px;  
     width:80%; 
     height:100%; 
     font-size: 12px;
     line-height: 24px;
     color: black; 
     font-family: inherit; 
     border:1px solid #eaeaea; 
     background: rgb(255, 255, 255, 1);
     box-sizing: border-box;
     outline:none; 
     resize: none; 
 }
 #leftNum { 
     padding:10px 4px; 
     height:100%; 
     width: 100%; 
     line-height: 24px;
     font-size: 12px; 
     text-align: center; 
     color: #999;
     font-weight: bold; 
     resize: none;
     outline:none; 
     overflow-y: hidden; 
     overflow-x: hidden; 
     border: 0; 
     background:rgb(13, 13, 13);
     box-sizing: border-box;
 }

</style>